<form action="javascript:void(0)">
    <div class="login">
        <div class="login_lef">
            <div class="d1">创建账户</div>
            <div class="d2">为您加快结算流程，便于查看订单历史及购物袋，以及管理电子发票</div>
            <div class="d3">已有蒂芙尼账户？<a href="./enter.html">登录&gt;</a></div>
            <div class="d4">
                <p class="p1">称呼</p>
                <select name="称呼" placeholder="称呼">
                    <option value=""></option>
                    <option value="先生">先生</option>
                    <option value="女士">女士</option>
                </select>
            </div>
            <div class="d5">
                <p class="p1">姓氏</p>
                <input type="text">
            </div>
            <div class="d6">
                <p class="p1">名字</p>
                <input type="text">
            </div>
            <div class="d7">
                <p class="p1">手机号</p>
                <input type="text" id="username">
            </div>
            <div class="d8">
                <p class="p1">密码</p>
                <input type="password" id="password">
            </div>
            <div class="d9" id="btn">
                创建账户
            </div>
        </div>
        <div class="login_rig"><img src="https://www.tiffany.cn/shared/images/checkout/blue-box.jpg" alt=""></div>
    </div>
</form>
<script src="./javascripts/utils.js"></script>
<script>
    var p_one = document.querySelector(".d4 .p1")
    var p_two = document.querySelector(".d5 .p1")
    var p_thr = document.querySelector(".d6 .p1")
    var p_fou = document.querySelector(".d7 .p1")
    var p_fiv = document.querySelector(".d8 .p1")
    var inp_one = document.querySelector(".d4 select")
    var inp_two = document.querySelector(".d5 input")
    var inp_thr = document.querySelector(".d6 input")
    var inp_fou = document.querySelector(".d7 input")
    var inp_fiv = document.querySelector(".d8 input")
    var btn = document.querySelector(".d9")
    inp_one.onfocus = function () {
        p_one.className = "p1 p2";
    }
    inp_one.onblur = function () {
        if (inp_one.value === "") {
            p_one.className = "p1 p3";
        } else {
            p_one.className = "p1 p2";
        }
    }
    inp_two.onfocus = function () {
        p_two.className = "p1 p2";
    }
    inp_two.onblur = function () {
        if (inp_two.value === "") {
            p_two.className = "p1 p3";
        } else {
            p_two.className = "p1 p2";
        }
    }
    inp_thr.onfocus = function () {
        p_thr.className = "p1 p2";
    }
    inp_thr.onblur = function () {
        if (inp_thr.value === "") {
            p_thr.className = "p1 p3";
        } else {
            p_thr.className = "p1 p2";
        }
    }
    inp_fou.onfocus = function () {
        p_fou.className = "p1 p2";
    }
    inp_fou.onblur = function () {
        if (inp_fou.value === "") {
            p_fou.className = "p1 p3";
        } else {
            p_fou.className = "p1 p2";
        }
    }
    inp_fiv.onfocus = function () {
        p_fiv.className = "p1 p2";
    }
    inp_fiv.onblur = function () {
        if (inp_fiv.value === "") {
            p_fiv.className = "p1 p3";
        } else {
            p_fiv.className = "p1 p2";
        }
    }
    $(function () {
        $(btn).click(function () {
            if (inp_one.value !== "" && inp_two.value !== "" && inp_thr.value !== "" && inp_fou.value !== "" && inp_fiv.value !== "") {
                var reg = /^(\+86)?1[3-9]\d{9}$/;
                if (reg.test(inp_fou.value)) {
                    let url = "http://localhost/sever/login.php";
                    xhr("POST", url, {
                        username: $("#username").val(),
                        password: $("#password").val()
                    }).then(function (res) {
                        // 请求结束之后我们要根据响应结果做出反馈; 
                        var data = JSON.parse(res);
                        if (data.type === "success") {
                            alert("注册成功")
                            setTimeout(function () {
                                location.href = "./enter.html";
                                // 跳转到登录页面; 
                            }, 1000)
                        } else {
                            alert("该账户已存在")
                        }
                    })
                }else{
                    alert("手机号格式错误")
                }
            }else{
                alert("请填写完整")
            }
        })
    })

</script>